Vue.component("login",{
    data(){
        return{
            user:{
                username:"",
                password:""
            },
            token:"",
            loginWinVisible:false,
            user:{},
            pwdWinVisible:false,
            pwd:{},
            forgetWinVisible:false,
            forget:{},
            registerWinVisible:false,
            register:{},
        }
    },
    template:`
   <div>
    <div>
        <div id="nav">
            <img src="">
            <ul>
                <span style="margin-left: 20px">英雄联盟赛事</span>
                <li><a href="/yjh-match/match.html">首页</a></li><span>|</span>
                <li><a href="/yjh-team/index.html">战队</a></li><span>|</span>
                <li><a href="/yjh-video/video.html">视频</a></li><span>|</span>
                <li><a href="/yjh-match/guest.html">竞猜</a></li><span>|</span>
                <li><a href="/yjh-user/user.html">个人中心</a></li><span>|</span>
                <li><a href="/yjh-ticket/ticket.html">售票</a></li>
            </ul>
            <div class="sp">
                <span v-if="user.username">
                    <span>欢迎&nbsp;&nbsp;
                        <img style="height: 50px;border-radius: 50px" :src="user.image">&nbsp;&nbsp{{user.username}}
                    </span>
                    <a href="" @click.prevent="logout">退出</a>&nbsp;&nbsp;
                </span>
                <span v-else>
                    <a href="" @click.prevent="showLoginWin">Hi,请登录</a>&nbsp;&nbsp;
                </span>
            </div>
        </div>
    </div>
    <el-dialog title="登录窗口" :visible.sync="loginWinVisible">
        <el-form>
            <el-form-item label="用户名" label-width="100px">
                <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="100px">
                <el-input v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="loginWinVisible = false">取 消</el-button>
            <el-button type="primary" @click="login">确 定</el-button>
        </div>
    </el-dialog>
    
    </div>
    `,
    created(){
        this.token=window.sessionStorage.getItem("token");
        if (this.token!=null){
            axios.get("/login-starter/user/getUserInfo", {
                headers: {
                    token:this.token
                }
            }).then(res=>{
                this.user=res.data.data.user
                this.$emit("logined",this.user);
                console.log(this.user)
            })
        }
    },
    methods:{
        login(){
            axios.post("/login-starter/user/login",this.user).then(res=>{
                if (res.data.code==200){
                    this.token=res.data.data.token;
                    window.sessionStorage.setItem("token",res.data.data.token);
                    this.loginWinVisible=false;
                    this.$message(res.data.msg);
                }else {
                    this.$alert(res.data.msg);
                }
            })
        },
        logout(){
            axios.get("/login-starter/user/logout", {
                headers: {
                    token:this.token
                }
            }).then(res=>{
                this.$alert(res.data.msg)
                this.user="";
            })
        },
        showLoginWin(){
            this.loginWinVisible=true;
        }
    }
})